let $ = layui.jquery;

export default class MateFilm {
    constructor() {
        this.render();
        this.handle();
    }

    render() {
        let template = `
        <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">查询</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required">
                    <option value="movieName">电影名</option>
                    <option value="movieType">类型</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="value" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-input-inline">
                <button id="queryBtn" type="button" class="layui-btn" lay-filter="formDemo">立即提交</button>
            </div>

        </div>

        <div class="layui-form-item">
            
        </div>

    </form>

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md9">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addBook">添加电影</button>
            <button class="layui-btn layui-btn-sm" lay-event="addBook">院线一览</button>
            <button class="layui-btn layui-btn-sm" lay-event="addBook">增加院线</button>
        </div>
    </script>

    <!-- 单元格工具栏 -->
    <script type="text/html" id="toolEventDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delBook">移除电影</a>
    </script>
        `;
        $("#content").html(template);

    }

    handle() {
        let table = layui.table;
        let layer = layui.layer;

        table.render({
            id: "myTable",
            elem: '#demo',
            url: '/api/mateList',
            toolbar: "#toolbarDemo",
            page: true,
            // 开启分页
            // 开启分页
            cols: [
                [
                    {
                        field: 'name',
                        title: '电影名'
                    },
                    {
                        field: 'ename',
                        title: '英文名',
                        sort: true
                    },
                    {
                        field: 'type',
                        title: '类型'
                    },
                    {
                        field: "mateCinema",
                        title: "院线",
                        templet: function (d) {
                            return d.mateFilm.cinemasName;
                        }
                    },{
                        title: '操作',
                        width: 150,
                        templet: '#toolEventDemo'
                    }
                ]
            ]
        });

        // $("#queryBtn").on('click', function () {
        //     let key = $("select[name='type']").val();
        //     let val = $("input[name='value']").val()
        //     console.log(key, val);
        //     table.reload('myTable', {
        //         where: { // 设定异步数据接口的额外参数，任意设
        //             key,
        //             val
        //         },
        //         page: {
        //             curr: 1 // 重新从第 1 页开始
        //         }
        //     });
        // })

        // 头部工具栏事件
        table.on("toolbar(test)", function (obj) {
            // switch (obj.event) {
            //     case "addBook":
            //         new AddBook();
            //         break;
            // }
        })


        // 触发单元格工具事件
        // table.on('tool(test)', function (obj) { // 双击 toolDouble
        //     var data = obj.data;
        //     if (obj.event === 'delBook') {
        //         layer.confirm('真的删除行么', function (index) {
        //             // obj.del();
        //             // layer.close(index);
        //             $.ajax({
        //                     type: "delete", url: `/api/delBook/${
        //                     data._id
        //                 }`,
        //                 success: function (res) {
        //                     if (res.code === 200) {
        //                         layer.closeAll();
        //                         table.reload("myTable", {});
        //                         layer.msg("删除成功");
        //                     } else {
        //                         layer.msg("你没有权限删除或者登录已经过期,请重新登录",function(){
        //                             setTimeout(()=>{
        //                                 location.hash = "#/login";
        //                             },2)
        //                         });
        //                     }

        //                 }

        //             })

        //         });

        //     } else if (obj.event === 'edit') {

        //         // new UpdateBook(data);

        //     };

        //     })

    }

}
